<template>  
  <view class="container">  
    <text class="title">修改密码</text>  
    <input type="password" placeholder="旧密码" v-model="oldPassword" />  
    <input type="password" placeholder="新密码" v-model="newPassword" />  
    <input type="password" placeholder="确认新密码" v-model="confirmPassword" />  
    <button @click="changePassword">修改密码</button>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      oldPassword: '',  
      newPassword: '',  
      confirmPassword: ''  
    };  
  },  
  methods: {  
    changePassword() {  
      if (!this.oldPassword || !this.newPassword || this.newPassword !== this.confirmPassword) {  
        uni.showToast({ title: '请填写正确的密码信息', icon: 'none' });  
        return;  
      }  
  
      // 调用后端API更新密码  
      uni.request({  
        url: 'http://127.0.0.1:3007/my/updatepwd',  
        method: 'POST',  
        data: {  
          oldPassword: this.oldPassword,  
          newPassword: this.newPassword  
        },  
        success: (res) => {  
          if (res.data.status===0) {  
            uni.showToast({ title: '密码修改成功', icon: 'success' });  
            // 可以选择返回登录页面或其他页面  
            setTimeout(() => {  
              uni.navigateBack(); // 返回上一页  
            }, 1500);  
          } else {  
            uni.showToast({ title: res.data.message, icon: 'none' });  
          }  
        },  
        fail: (err) => {  
          uni.showToast({ title: '网络请求失败', icon: 'none' });  
        }  
      });  
    }  
  }  
};  
</script>  

<style scoped>  
.change-password-container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 20px;  
  background-color: #f9f9f9; /* 浅灰色背景 */  
  border-radius: 8px; /* 圆角边框 */  
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
  width: 90%; /* 宽度 */  
  max-width: 400px; /* 最大宽度 */  
  margin: 50px auto; /* 上下外边距，水平居中 */  
}  
  
.title {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333; /* 深灰色文字 */  
  margin-bottom: 20px; /* 下边距 */  
}  
  
.input-container {  
  position: relative;  
  margin-bottom: 15px; /* 输入框之间的间隔 */  
}  
  
.password-input {  
  width: 100%; /* 宽度占满容器 */  
  padding: 10px 15px; /* 内边距 */  
  border: 1px solid #ccc; /* 边框颜色 */  
  border-radius: 4px; /* 圆角边框 */  
  font-size: 16px; /* 字体大小 */  
  color: #666; /* 浅灰色文字 */  
}  
  
.submit-btn {  
  width: 100%; /* 宽度占满容器 */  
  padding: 12px 0; /* 上下内边距，左右为0因为文字居中 */  
  background-color: #007aff; /* 蓝色背景 */  
  color: #fff; /* 白色文字 */  
  border: none; /* 无边框 */  
  border-radius: 4px; /* 圆角边框 */  
  font-size: 16px; /* 字体大小 */  
  cursor: pointer; /* 鼠标悬停时显示指针 */  
}  
  
.submit-btn:active {  
  background-color: #0056b3; /* 按钮按下时的背景色 */  
}  
</style>